<!-- .vue 文件是vue模块化环境下提供的专用的vue配置文件，该文件可以同时提供模板、配置和样式 -->
<!-- 一个单文件组件可以只定义一个 template => 配置为空配置 => 无样式 -->
<template>
  <img alt="Vue logo" src="@/assets/logo.png">
  <!-- 
    模板区域内部遵守HTML语法规则，但可识别大小写组件名称 
      1、如果组件没有分发要求可以使用 非闭合标签 ， 但不能使用H5的规则【不能省略/】
      2、如果组件存在分发要求，必须使用 闭合标签
  -->
  <hello-world msg="Welcome to Your Vue.js App"></hello-world>
  <hr>
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
<!-- 一个单文件组件只能存在一个有效的 template 模板 -->
<!-- <template>
  <h1>app.vue的第二个模板</h1>
</template> -->

<!-- script 只能出现一个 -->
<!-- <script>
  console.log("app.vue的打印")
</script> -->
<script>
// script 是单文件组件的脚本区（JS的模块代码定义运行区）
//    所以 script 内的语法遵守JS语法+ES模块 规则
//    同时 script 被分解为两个运行代码+定义代码区
//        + export default 以外的区域，等效于模块文件的代码区域
//            => 模块的加载，变量的定义、方法的描述、循环的操作、判断的执行 ……
//        + export default 导出对象，提供vue加载单文件组件时的 vue相关配置
//            => 导出对象的定义规则，就是vue的配置规则
//            => export default 只能存在一个

// 加载一个 .vue 的模块文件(可以用于vue组件构建的配置项)
import HelloWorld from '@/components/HelloWorld.vue'
// console.log("app.vue 打印")
// console.log(HelloWorld)

export default {
  name: 'App',
  components: {
    // HelloWorld,
    // 基于导入配置完成局部组件注册
    HelloWorld:HelloWorld
  }
}
</script>

<!-- style可以出现多个 -->
<style scoped>
/* 
  style标签用于描述样式 ，遵守CSS样式语法规则
      ==> 如果存在语言系统的设置属性 lang  语法规则将发生变化 【语言切换时需要模块支持的】
*/
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
}
</style>
<style scoped>
/* 
  style标签用于描述样式 ，遵守CSS样式语法规则
      ==> 如果存在语言系统的设置属性 lang  语法规则将发生变化 【语言切换时需要模块支持的】
*/
hr{
  border-color: red;
}
</style>

